<template>
  <div>
    <Header></Header>

    <!--主体部分-->
      <el-steps :active="2" align-center>
        <el-step description="选择影片场次"></el-step>
        <el-step description="选择座位"></el-step>
        <el-step description="14分钟内付款"></el-step>
        <el-step description="影院取票观影"></el-step>
      </el-steps>

    <!--主体-->
    <div class="container">
      <div class="wrapper">
        <img src="../assets/pay/1.png" alt="" />
        <p>请在<span>分钟</span>秒内支付完成</p>
        <p class="tip">
          超时订单会自动取消，如遇支付问题，请致电猫眼客服：1010-5335
        </p>
      </div>
      <div class="warning">
        <p class="warning">
          请仔细核对场次信息，出票后将<span class="attention"
            >无法退票和改签</span
          >
        </p>
      </div>
      <table class="order-table">
        <thead>
          <tr>
            <th>影片</th>
            <th>时间</th>
            <th>影院</th>
            <th>座位</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="movie-name">《李茂扮太子》</td>
            <td class="showtime">今天 1月9日 22:50</td>
            <td class="cinema-name">CGV影城（亦庄店）</td>
            <td>
              <span class="hall">激光1厅</span>
              <div class="seats">
                <div>
                  <span class=""><i>2</i>排<i>12</i>座</span>
                </div>
                <div></div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="right">
        <div class="header1">
          <span>实际支付 :</span>
          <span class="price">￥86</span>
        </div>
        <div class="btn1">
        <div class="btn">确认支付</div>
        </div>
      </div>
    </div>

    <low></low>
  </div>
</template>

<script>
import low from "../components/low";
import Header from "../components/Header";
export default {
  name: "pay",
  components: {
    low,
    Header
  }
};
</script>
<style scoped>

.el-steps{
    margin-top:50px;
}

/* 主体 */
.container {
  width: 1200px;
  margin: 0 auto;
}
.container .wrapper {
  margin-top: 100px;
  background-color: pink;
  height: 100px;
}
.container .wrapper img {
  float: left;
  height: 100%;
}
.container .wrapper p {
  text-align: center;
  display: block;
  color: #333;
  padding-top: 20px;
}
.warning {
  margin-top: 30px;
}
.attention {
  color: pink;
}
.order-table {
  width: 100%;
  border: 1px solid #e5e5e5;
  border-spacing: 0;
  margin-bottom: 60px;
}
.order-table thead {
  background-color: #f7f7f7;
}
.order-table thead th {
  font-size: 16px;
  color: #333;
  width: 25%;
  padding: 14px 0;
  font-weight: 400;
}
.order-table td {
  text-align: center;
  padding-left: 20px;
  color: #333;
}
.right {
  float: right;
}
.right .header1 {
  font-size: 14px;
  color: #333;
  margin-bottom: 17px;
}
.right .price {
  font-size: 36px;
  color: #f03d37;
}
.btn1{
    float:right;
}
.btn {
  cursor: pointer;
  display: inline-block;
  width: 190px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  background-color: #f03d37;
  border-radius: 100px;
  box-shadow: 0 2px 10px -2px #f03d37;
}
</style>
